import React, { useState } from 'react';
import { comfyElectronApi } from '../lib/bridge';

const windowAPI = comfyElectronApi.windowTabManager;
export function CustomWindowsWindowControl() {
  const [maxmized, setMaxmized] = useState(false);
  const handleMinimize = () => {
    windowAPI.minimizeWindow();
  };

  const handleMaximize = async () => {
    if (maxmized) {
      windowAPI.unmaxmizeWindow();
      setMaxmized(false);
    } else {
      windowAPI.maxmizeWindow();
      setMaxmized(true);
    }
  };

  const handleClose = () => {
    windowAPI.closeWindow();
  };

  return (
    <div className="wiondows-window-controller">
      <div id="minimize" onClick={handleMinimize}>
        <MinimizeIcon/>
      </div>
      <div id="maximize" onClick={handleMaximize}>
        {maxmized ? <UnMaxmizeIcon/> : <MaxmizeIcon/>}
      </div>
      <div id="close" onClick={handleClose}>
        <CloseIcon/>
      </div>
    </div> 
  )
}

function MinimizeIcon() {
  return (
    <svg width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
    <path d="M7.63672 14.665H20.3633C20.8994 14.665 21.3564 14.2168 21.3564 13.6631C21.3564 13.1182 20.8994 12.6611 20.3633 12.6611H7.63672C7.11816 12.6611 6.64355 13.1182 6.64355 13.6631C6.64355 14.2168 7.11816 14.665 7.63672 14.665Z" fill="white"/>
    </svg>
  )
}

function MaxmizeIcon() {
  return (
    <svg width="24" height="24" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
      <path d="M21.1367 6.5791C20.2227 5.67383 18.9746 5.48926 17.3662 5.48926H10.6162C9.02539 5.48926 7.77734 5.67383 6.87207 6.5791C5.9668 7.47559 5.7998 8.71484 5.7998 10.3057V17.0029C5.7998 18.6201 5.9668 19.8594 6.87207 20.7559C7.77734 21.6611 9.02539 21.8369 10.6338 21.8369H17.3662C18.9746 21.8369 20.2314 21.6611 21.1367 20.7559C22.0332 19.8506 22.2002 18.6201 22.2002 17.0029V10.332C22.2002 8.71484 22.0332 7.47559 21.1367 6.5791ZM20.4512 10.0859V17.249C20.4512 18.1631 20.3369 18.9893 19.8535 19.4727C19.3613 19.9648 18.5264 20.0879 17.6123 20.0879H10.3965C9.48242 20.0879 8.63867 19.9561 8.15527 19.4727C7.67188 18.9893 7.54883 18.1631 7.54883 17.249V10.1035C7.54883 9.17188 7.67188 8.33691 8.15527 7.85352C8.63867 7.37012 9.48242 7.24707 10.4141 7.24707H17.6123C18.5264 7.24707 19.3613 7.37012 19.8535 7.85352C20.3369 8.3457 20.4512 9.17188 20.4512 10.0859Z" fill="white"/>
    </svg>
    )
}


function UnMaxmizeIcon() {
  return (
    <svg width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
      <path fill-rule="evenodd" clip-rule="evenodd" d="M21.1792 5.86546C20.4534 5.14657 19.4623 5 18.185 5H12.8248C11.5615 5 10.5704 5.14657 9.8515 5.86546C9.16021 6.55004 9.01105 7.48632 9.00061 8.6805C8.03041 8.73236 7.24731 8.93498 6.6513 9.53099C5.93242 10.2429 5.7998 11.227 5.7998 12.4903V17.8087C5.7998 19.0929 5.93242 20.077 6.6513 20.7889C7.37019 21.5078 8.36128 21.6474 9.63853 21.6474H14.9848C16.2621 21.6474 17.2601 21.5078 17.979 20.7889C18.6614 20.0999 18.8115 19.1736 18.8228 17.9671C19.7992 17.9162 20.5847 17.7179 21.1792 17.1234C21.8911 16.4045 22.0237 15.4274 22.0237 14.1431V8.8457C22.0237 7.56148 21.8911 6.57737 21.1792 5.86546ZM18.8236 16.5785C19.3705 16.5396 19.8507 16.4139 20.1602 16.1044C20.5441 15.7205 20.6348 15.0644 20.6348 14.3386V8.65028C20.6348 7.92441 20.5441 7.26834 20.1602 6.87749C19.7694 6.49361 19.1063 6.3959 18.3804 6.3959H12.6642C11.9244 6.3959 11.2544 6.49361 10.8705 6.87749C10.4866 7.26136 10.3889 7.92441 10.3889 8.66424V8.66553H14.9848C16.2621 8.66553 17.2532 8.8121 17.979 9.53099C18.6909 10.2429 18.8236 11.227 18.8236 12.5112V16.5785ZM17.4346 18.0041V12.3158C17.4346 11.5899 17.3439 10.9339 16.96 10.543C16.5692 10.1591 15.9061 10.0614 15.1803 10.0614H9.46404C8.72422 10.0614 8.05418 10.1591 7.67031 10.543C7.28644 10.9269 7.18873 11.5899 7.18873 12.3298V18.0041C7.18873 18.73 7.28644 19.386 7.67031 19.7699C8.05418 20.1538 8.72422 20.2585 9.45008 20.2585H15.1803C15.9061 20.2585 16.5692 20.1608 16.96 19.7699C17.3439 19.386 17.4346 18.73 17.4346 18.0041Z" fill="white"/>
    </svg>
  )
}

function CloseIcon() {
  return (
    <svg width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
      <path d="M8.31361 17.9346C7.94447 18.3037 7.92689 18.9629 8.3224 19.3408C8.70033 19.7363 9.3683 19.7188 9.73744 19.3496L14.0001 15.0869L18.2628 19.3496C18.6408 19.7275 19.2911 19.7363 19.6691 19.3408C20.0646 18.9629 20.0558 18.3037 19.6779 17.9258L15.4152 13.6631L19.6779 9.40918C20.0558 9.02246 20.0646 8.37207 19.6691 7.99414C19.2911 7.59863 18.6408 7.60742 18.2628 7.98535L14.0001 12.248L9.73744 7.98535C9.3683 7.61621 8.70033 7.59863 8.3224 7.99414C7.92689 8.37207 7.94447 9.03125 8.31361 9.40039L12.5763 13.6631L8.31361 17.9346Z" fill="white"/>
    </svg>
  )
}